<template>
  <div class="contianer-q">
    <div class="icon">
      <router-link to="../carouse">
        <span class="iconfont"
          ><svg
            t="1623656776630"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2658"
            width="50"
            height="25"
          >
            <path
              d="M230.8608 544l198.8096 198.8096a32 32 0 0 1-45.2608 45.2608l-249.856-249.856a37.12 37.12 0 0 1 0-52.48l249.856-249.8048a32 32 0 0 1 45.2608 45.2608L230.8608 480H870.4a32 32 0 1 1 0 64H230.8608z"
              p-id="2659"
            ></path></svg
        ></span>
      </router-link>
    </div>
    <div>
      <input type="text" placeholder="请搜索" @input="searchAction($event)" />
      <svg
        t="1623660107275"
        class="icon1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2479"
        width="25"
        height="20"
      >
        <path
          d="M688.565345 653.900847c0 0-11.672854 15.440667-27.297716 30.575366l179.917696 176.300308 29.860075-27.91784L688.565345 653.900847 688.565345 653.900847zM752.457514 462.786135c0 175.017082-134.816498 306.400389-301.919331 306.400389C276.296767 766.655887 149.950174 629.448946 149.950174 463.021495c0-160.758334 135.995347-296.318776 300.588009-296.318776C617.641015 166.70272 752.457514 304.025295 752.457514 462.786135L752.457514 462.786135zM449.439152 206.867488c-143.231145 0-259.32421 116.181069-259.32421 261.075087 0 144.898111 116.093065 261.882476 259.32421 261.882476 143.250588 0 262.8495-116.984365 262.8495-261.882476C712.288652 323.048557 592.68974 206.867488 449.439152 206.867488L449.439152 206.867488zM449.439152 206.867488"
          p-id="2480"
        ></path>
      </svg>
    </div>
    <div class="items-q">
      <ul v-if="searchResult.length > 0" style="width: 100%">
        <li
          v-for="(item, index) of searchResult"
          :key="index"
          style="display: flex"
        >
          <div class="img-q">
            <img :src="item.image_url" />
          </div>
          <div class="item-q">
            <h1>{{ item.product_name }}</h1>
            <h2>{{ item.product_description }}</h2>
            <span class="first">￥{{ item.selling_price }}</span>
            <span class="second">已售出{{ item.sales }} 件</span>
            <span class="third">
              <van-cell @click="showPopup" arrow-direction="left">
                对比</van-cell
              >
              <van-popup
                v-model="show"
                position="bottom"
                :style="{ height: '33.8%' }"
                :overlay="false"
                closeable
              >
                <div style="font-size: 0.16rem; padding: 0.06rem 0 0 0.25rem">
                  {{ title }}
                </div>
                <div id="tc-2">
                  <div id="tc-2-1">
                    <div><a href="#">1</a></div>
                    <p>可以继续添加</p>
                  </div>
                  <div id="tc-2-1">
                    <div><a href="#">2</a></div>
                    <p>可以继续添加</p>
                  </div>
                  <div id="tc-2-1">
                    <div><a href="#">3</a></div>
                    <p>可以继续添加</p>
                  </div>
                  <div id="tc-2-1">
                    <div><a href="#">4</a></div>
                    <p>可以继续添加</p>
                  </div>
                </div>
                <div id="tc-3">
                  <button class="bt">清空对比栏</button>
                  <button class="bt">对比</button>
                </div>
              </van-popup>
            </span>
          </div>
        </li>
      </ul>

      <ul v-else></ul>
    </div>
  </div>
</template>

<script>
import Data from "../../../public/data.json";
import { Popup } from "vant";
import { Cell } from "vant";
import Vue from "vue";

Vue.use(Popup, Cell);
export default {
  name: "App",
  data() {
    return {
      Data,
      searchResult: [],
      list: [],
      count: 0,
      isLoading: false,
      show: false,
      title: "套餐对比",
      active: "2",
      value: "",
    };
  },
  methods: {
    searchAction(e) {
      const inputValue = e.target.value;
      this.searchResult = this.Data.filter((item) => {
        if (item.product_name.includes(inputValue)) {
          return item;
        }
      });
    },
    showPopup() {
      this.show = true;
    },
    onChange() {},
    onSearch() {},
  },
};
</script>

<style lang='stylus' scoped>
.contianer-q {
  margin: 0 0.15rem 0 0.15rem;
  height: 100%;
  // display: flex;
  text-align: center;
  position: relative;
}

.icon {
  position: absolute;
  left: 0;
}

.items-q {
  display: flex;
}

.img-q {
  margin-top: 0.1212rem;
  width: 1.0875rem;
  height: 1.0875rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.item-q {
  margin-left: 0.1212rem;
  margin-top: 0.1212rem;
  flex: 1;
  width: 2.175rem;
  height: 1.2078rem;
  position: relative;

  .first {
    color: #ff6732;
    font-size: 0.15rem;
    font-weight: bold;
    margin-right: 0.02rem;
  }

  .second {
    color: #999;
  }

  .third {
    color: #333333;
    position: absolute;
    right: 0;

    // position: relative;
    span {
      position: absolute;
      top: 0.015rem;
      left: -0.15rem;
    }
  }

  h1 {
    color: #2d2c2c;
    font-size: 0.1575rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  h2 {
    margin-top: 0.03rem;
    color: #999;
    font-size: 0.12rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

#tc-2 {
  width: 3.45rem;
  height: 1.05rem;
  display: flex;
  margin: 0.2rem auto;

  #tc-2-1 {
    width: 0.78rem;
    height: 1.05rem;
    margin-right: 0.11rem;

    div {
      height: 0.79rem;
      background-color: #f6f6f6;
      text-align: center;

      a {
        line-height: 0.79rem;
        font-size: 0.36rem;
        color: #cdcdcd;
      }
    }

    &:nth-child(4) {
      margin-right: 0;
    }

    p {
      font-size: 0.12rem;
      color: #999;
      margin-top: 0.07rem;
    }
  }
}

#tc-3 {
  width: 100%;
  height: 0.5rem;
  margin-top: 0.04rem;

  .bt {
    width: 50%;
    height: 0.5rem;
    outline: none;
    border: none;

    &:nth-child(1) {
      background-color: #ffffff;
      color: #FF6110;
      font-size: 0.16rem;
    }

    &:nth-child(2) {
      background-color: #EEEEEE;
      font-size: 0.16rem;
      color: #AAAAAA;
    }
  }
}
</style>